<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    canvas{
        display: block;
        margin: 0 auto;
    }


</style>

<body>
    <canvas class="myCanvas" width="301" height="301"></canvas>   
</body>
<script>
    var myCanvas = document.querySelector('.myCanvas');
    var paint = myCanvas.getContext('2d');


    paint.beginPath();
    paint.arc(150,150,150,0,360/180*Math.PI,true);   
    paint.stroke();
    paint.closePath();



    paint.beginPath();
　　paint.arc(150,150,150,0.5*Math.PI,1.5*Math.PI,false);
　　paint.closePath();
　　paint.fillStyle = "#000";
　　paint.fill();


    paint.beginPath();
　　paint.arc(150,150,150,0.5*Math.PI,1.5*Math.PI,true);
　　paint.closePath();
    paint.fillStyle = "#fff";
　　paint.fill();



    paint.beginPath();
　　paint.arc(150,75,75,0,2*Math.PI,true);
　　paint.closePath();
    paint.fillStyle = "#fff";
　　paint.fill();




    paint.beginPath();
　　paint.arc(150,225,75,0,2*Math.PI,true);
　　paint.closePath();
    paint.fillStyle = "#000";
　　paint.fill();





    paint.beginPath();
　　paint.arc(150,75,37.5,0,2*Math.PI,true);
　　paint.closePath();
    paint.fillStyle = "#000";
　　paint.fill();





    paint.beginPath();
　　paint.arc(150,225,37.5,0,2*Math.PI,true);
　　paint.closePath();
    paint.fillStyle = "#fff";
　　paint.fill();






    





</script>
</html>